import React from 'react';
import { View, Text, StyleSheet, TextInput } from 'react-native';
import PropTypes from 'prop-types';
import { Title } from 'bee/components/MakePlan';
import { px2dp } from 'bee/utils/px2dp';
import { sizes, colors } from 'bee/themes';

export default function Email({ email, onChange }) {
  return (
    <View style={styles.section}>
      <Title title="邮箱" />
      <View style={styles.emailView}>
        <Text style={styles.text}>客户邮箱:</Text>
        <TextInput
          value={email}
          onChangeText={text => {
            onChange(text);
          }}
          style={styles.input}
          underlineColorAndroid="transparent"
        />
      </View>
    </View>
  );
}

Email.propTypes = {
  email: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
};

const styles = StyleSheet.create({
  section: {
    backgroundColor: colors.white,
    marginBottom: px2dp(20),
  },
  input: {
    paddingHorizontal: px2dp(24),
    paddingVertical: 0,
    flex: 1,
    fontSize: sizes.f0,
    backgroundColor: colors.white,
  },
  text: {
    fontSize: sizes.f2,
    color: colors[1101],
  },
  emailView: {
    height: px2dp(80),
    paddingHorizontal: px2dp(64),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
});
